<template>

		<div id="container" tabindex="0"></div>
		

</template>

<script>
	import mui from 'static/js/mui'
	import logo from './img/map_logo.png'
	export default{
		data(){
			return{
			Amap:''	,
			positonVal:'获取中...',
			androidV:''
			}
		},
		mounted(){
			//竖向滚动
			mui.init({
					keyEventBind: {
					backbutton: true  //关闭back按键监听
					}
			})
			mui.back = function () {
					history.go(-1)
			}
			mui('.mui-scroll-wrapper').scroll({
					scrollY: true, //是否竖向滚动
					scrollX: false, //是否横向滚动
					startX: 0, //初始化时滚动至x
					startY: 0, //初始化时滚动至y
					indicators: true, //是否显示滚动条
					deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
					bounce: true //是否启用回弹
			});
			var map = new AMap.Map('container', {
				resizeEnable: true,
				center: [120.194059, 31.701478],
				zoom: 20
			});
			AMap.plugin(['AMap.ToolBar', 'AMap.ElasticMarker', 'AMap.AdvancedInfoWindow','AMap.Driving'], function () {
				var toolbar = new AMap.ToolBar();
				map.addControl(toolbar);
			})

			var icon = new AMap.Icon({
				size: new AMap.Size(25, 45),    // 图标尺寸
				image: 'static/img/dianbiaoji@2x.png', // Icon的图像
			  //imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
				imageSize: new AMap.Size(25, 45)   // 根据所设置的大小拉伸或压缩图片
			});
			
			var marker = new AMap.Marker({
				//content: '车',
			  //position: new AMap.LngLat(116.39, 39.9),
				offset: new AMap.Pixel(-12, -40),
				icon: icon, // 添加 Icon 图标 URL
				title: '北京'
			})
			//plus.maps.openSysMap( '环球港', 120.194059, 31.701478 );
			map.add(marker);

			var onMarkerClick = function (e) {			
				if (mui.os.ios){
					var content = '<div style="	color: white;font-size: 14px;background-color:#0093fe;line-height: 26px;padding: 0px 0 0 6px;font-weight: lighter;letter-spacing: 1px;">高德地图</div><div style="padding: 4px;color: #666666;line-height: 23px;">' +
					'<img style="float:left;margin: 3px;" src="http://webapi.amap.com/images/amap.jpg">' +
					'<span>高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。</span><br/>' +
					'<a  style="color:#666666!important;float:right;border:1px solid #ddd; border-radius:20px;padding:3px;width:80px;margin-bottom:10px;height:30px;text-align:center;display:block" target="_blank" href = "iosamap://rootmap?sourceApplication=com.cnupai.mall&lat='+e.lnglat.getLat()+'&amp;lon='+e.lnglat.getLng()+'&dev=1">去导航</a>'+
						'<a style="color:#666666!important;float:right;padding:3px;width:80px;margin-bottom:10px;height:30px;text-align:center;display:block" href = "http://mobile.amap.com/">下载高德</a></div>';
				}else{
					var content = '<div style="	color: white;font-size: 14px;background-color:#0093fe;line-height: 26px;padding: 0px 0 0 6px;font-weight: lighter;letter-spacing: 1px;">高德地图</div><div style="padding: 4px;color: #666666;line-height: 23px;">' +
        '<img style="float:left;margin: 3px;" src="http://webapi.amap.com/images/amap.jpg">' +
        '<span>高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。</span><br/>' +
        '<a  style="color:#666666!important;float:right;border:1px solid #ddd; border-radius:20px;padding:3px;width:80px;margin-bottom:10px;height:30px;text-align:center;display:block" target="_blank" href = "androidamap://showTraffic?sourceApplication=com.cnupai.mall&amp;poiid=BGVIS1&amp;lat='+e.lnglat.getLat()+'&amp;lon='+e.lnglat.getLng()+'&amp;level=10&amp;dev=0">去导航</a>'+
					'<a style="color:#666666!important;float:right;padding:3px;width:80px;margin-bottom:10px;height:30px;text-align:center;display:block" href = "http://mobile.amap.com/">下载高德</a></div>';
				}
				var infowindow1 = new AMap.AdvancedInfoWindow({
					content: content,
					offset: new AMap.Pixel(0, -30)
				});
				////console.log(info)
				infowindow1.open(map, [e.lnglat.getLng(), e.lnglat.getLat()]);//打开信息窗体
			}
			marker.on('click', onMarkerClick);//绑定click事件
		},
		methods:{
			goGaode(){
				plus.maps.openSysMap( dst, des, src );
			}
		}
	}
</script>

<style scoped>
 body,
html,
#container {
	width: 100%;
	height: 100%;
	margin: 0px
}


</style>